<template>
  <div>
    <div class="hui-mine">
      <div class="card" v-for="(v, k) in list" :key="k">
        <div class="content">
          <img :src="v.image">
          <div class="text">
            <p class="name">
              {{v.name}}
              <!-- <span class="time">{{v.add_time}}</span> -->
            </p>
            <p class="middle">有效期至：</p>
            <p class="end">
              {{v.end_time}}
              <span class="right"
                :class="{red: Number(v.status) === 1}"
                @click="Number(v.status) === 1 && $router.push({name: 'LljList'})"
              >{{status[v.status]}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HuiMine',
    data () {
      return {
        list: [],
        status: {}
      }
    },
    methods: {
      getList () {
        this.$post('/vue/hui_coin/hui_coupon').then(data => {
          this.list = data.list
          this.status = data.status_list
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-53: rgb(53, 53, 53);
  @c-120: rgb(120, 120, 120);
  @c-153: rgb(153, 153, 153);
  @c-169: rgb(169, 169, 169);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .hui-mine {
    background-color: rgb(240, 244, 247);
    min-height: 100vh;
    overflow: hidden;
    .card {
      margin-top: 8px;
      padding: 12px;
      background-color: #FFF;
      text-align: left;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      .content {
        display: flex;
        justify-content: space-between;
        img {
          flex: 0 0 auto;
          width: 72px;
          height: 72px;
        }
        .text {
          flex: 1;
          margin-left: 8px;
          p {
            font-size: 12px;
            line-height: 24px;
            color: @c-169;
            &.name {
              font-size: 13px;
              font-weight: bold;
              color: @c-53;
              .time {
                font-size: 12px;
                float: right;
                font-weight: normal;
                color: @c-120;
              }
            }
            &.middle {
              color: @c-120;
              margin-top: 8px;
            }
            &.end {
              color: @c-153;
              font-size: 12px;
              line-height: 17px;
              .right {
                float: right;
                &.red {
                  width: 64px;
                  font-size: 12px;
                  line-height: 24px;
                  color: #FFF;
                  background-color: @c-red;
                  border-radius: 5px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>